<script setup>
import Top from './components/Top.vue'
import Second from './components/Second.vue'
import Third from './components/Third.vue'
import Fourth from "./components/Fourth.vue"
import useDatabaseStore from "./store/databaseStore";
import showPageStore from "./store/showPageStore";
import {onMounted,onUpdated} from "vue"

const st = useDatabaseStore()
const sp = showPageStore()

onUpdated(async () =>{
  let data = await myApi.getDatabases()
  let result = eval("(" + data.toString('utf-8') + ")");
  st.setResult(result)
})

onMounted(async () => {
  let data = await myApi.getDatabases()
  let result = eval("(" + data.toString('utf-8') + ")");
  st.setResult(result)
})

const changePage = (num) => {
  sp.setNum(num)
}
</script>

<template>
  <div style="padding: 5px;">
    <el-row>
      <el-col :span="24">
        <Top></Top>
      </el-col>
    </el-row>
  </div>
  <div style="padding: 5px" v-if="sp.num !== 0">
    <router-view></router-view>
  </div>
  <div style="padding: 5px" v-if="sp.num === 0">

    <el-row class="mg">
      <el-col :span="24">
        <Second></Second>
      </el-col>
    </el-row>
    <el-row class="mg">
      <el-col :span="16">
        <Third></Third>
      </el-col>
      <el-col :span="8">
        <Fourth></Fourth>
      </el-col>
    </el-row>
  </div>

</template>

<style>

.mg {
  margin-top: 2vh;
}

.mgl {
  margin-left: 1vw;
}

.dataP {
  cursor: pointer;
}

::-webkit-scrollbar{width:8px;height:4px;border-radius: 3px}
::-webkit-scrollbar-button{width:6px;height:0;border-radius: 3px}
::-webkit-scrollbar-track{background:0 0}
::-webkit-scrollbar-thumb{background:#245FD9;-webkit-transition:.3s;transition:.3s}
::-webkit-scrollbar-thumb:hover{background-color:#245FD9}
::-webkit-scrollbar-thumb:active{background-color:#245FD9}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track-piece{
  background-color: transparent;
  -webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical{
  height: 6px;
  background-color: transparent;
  -webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal{
  width: 6px;
  background-color: transparent;
  -webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical:hover,::-webkit-scrollbar-thumb:horizontal:hover{
  background: linear-gradient(0deg, rgba(34,162,195,1) 0%, rgba(45,253,132,1) 100%);
}
</style>
